<!DOCTYPE html>
<html>
	<head>
		<title>Different copy-paste modes</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Different copy-paste modes</div>
		<div class='sample_comment'></div>
		<table>
			<tr>
				<td valign="top">
					<div class='sample_comment'>'Insert' mode with row selection</div>
					<div id="testA"></div>
				</td>
				<td valign="top">
					<div class='sample_comment'>'Block' mode with cell selection</div>
					<div id="testC"></div>
				</td>
			</tr>
			<tr>
				<td valign="top">
					<div class='sample_comment'>'Selection' mode with row selection</div>
					<div id="testB"></div>
				</td>
				<td valign="top">
					<div class='sample_comment'>'Repeat' mode with column selection</div>
					<div id="testD"></div>
				</td>
			</tr>
		</table>

		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			var columns = [
				{ id:"id",	header:"", css:{"text-align":"right"},  	width:50},
				{ id:"value",	header:"Film title",	width:250,
					template:"{common.treetable()} #value#" },
				{ id:"chapter",	header:"Mode",	width:200}
			];
			var data = [
				{ "id":"1", "value":"The Shawshank Redemption", "open":true, "data":[
					{ "id":"1.1", "value":"Part 1", "chapter":"alpha"},
					{ "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
						{ "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
						{ "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"}
					]},
					{ "id":"1.3", "value":"Part 3", "chapter":"gamma" }
				]},
				{ "id":"2", "value":"The Godfather", "data":[
					{ "id":"2.1", "value":"Part 1", "chapter":"alpha" },
					{ "id":"2.2", "value":"Part 2", "chapter":"beta" }
				]}
			];
			grida = new webix.ui({
				container:"testA",
				view:"treetable",
				columns:webix.copy(columns),
				autoheight:true,
				autowidth:true,
				select:"row",
				multiselect:true,
				clipboard:"insert",
				data: webix.copy(data)
			});
			gridb = new webix.ui({
				container:"testB",
				view:"treetable",
				columns:webix.copy(columns),
				autoheight:true,
				autowidth:true,
				select:"row",
				multiselect:true,
				clipboard:"selection",
				data: webix.copy(data)
			});
			gridc = new webix.ui({
				container:"testC",
				view:"treetable",
				columns:webix.copy(columns),
				autoheight:true,
				autowidth:true,
				select:"cell",
				multiselect:true,
				clipboard:"block",
				data: webix.copy(data)
			});
			gridd = new webix.ui({
				container:"testD",
				view:"treetable",
				columns:webix.copy(columns),
				autoheight:true,
				autowidth:true,
				select:"column",
				multiselect:true,
				clipboard:"repeat",
				data: webix.copy(data)
			});
		});
		</script>
	</body>
</html>